<template>
    <panelHead :route="route"/>
    <!--表格-->
    <div class="btns">
        <el-button icon="Plus" type="primary" @click="open(null)">open</el-button>
    </div>
    <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column prop="name" label="昵称"/>
        <el-table-column prop="name" label="昵称"/>
        <el-table-column prop="permissionName" label="权限" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" size="small" @click="open(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--pagination组件-->
    <el-pagination
        v-model:current-page="paginationData.pageNum"
        :page-size="paginationData.pageSize"
        :background="background"
        :page-sizes="[1, 2, 3, 4, 5]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
    <el-dialog v-model="dialogTableVisible" :before-close="handelClose" title="添加权限" width="500">
        <el-form ref="formRef" label-width="100px" label-position="left" :model="form" :rules="rules">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="权限名称"></el-input>
            </el-form-item>
            <el-form-item v-show="false" prop="id">
                <el-input v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="权限" prop="permissions">
                <el-tree
                    ref="treeRef"
                    style="max-width:600px"
                    show-checkbox
                    :data="permissionData"
                    :default-checked-keys="disable"
                    node-key="id"
                    :default-expanded-keys="expandeds"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirm(formRef)">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { userGetmenu, userSetMenu, menuList } from '../../../api/index';
import { useRoute } from 'vue-router';

const route = useRoute();

onMounted(() => {
    userGetmenu().then(res => {

        permissionData.value = res.data.data;

        console.log(permissionData.value);
        
    });

    getList(); //权限数据
})

const open = (rowData = {}) => {
    dialogTableVisible.value = true;
    // form 弹窗打开form生成是异步的
    nextTick(() => {
        if (rowData) {
            Object.assign(form, { id: rowData.id, name: rowData.name });
            treeRef.value.setCheckedKeys(rowData.permission);
        } else {
            Object.assign(form, { id: null, name:null });
            treeRef.value.setCheckedKeys([2,4,5]);
        }
    })
}

// 提交数据 (*insert set)
const confirm = async (formRef) => {
    if (!formRef) return;
    await formRef.validate((valid) => {
        if (valid) {
            userSetMenu({
                name: form.name,
                permissions: JSON.stringify(treeRef.value.getCheckedKeys()),
                id: form.id
            }).then(res => {
                // console.log(res);
                dialogTableVisible.value = false;
                window.location.reload();
            })
        } else {
            return false;
        }
    });
    // location.reload();
}

// 删除权限功能
const remove = (id) => {
    // console.log(id);
    console.log('id: ' + id + '被删了');

    tableData.list = tableData.list.filter(item => item.id !== id);
}

//form 的数据
const form = reactive({
    id: '',
    name: '',
    permissions: ''
});

const handleSizeChange = (pageSize) => {
    paginationData.pageSize = pageSize;
    getList();
}

const handleCurrentChange = (pageNum) => {
    paginationData.pageNum = pageNum;
    getList();
}

const tableData = reactive({
    list: [],
    total: 0
});

// 分页参数
const paginationData = reactive({
    pageNum: 1,
    pageSize: 10
})

// 请求列表数据
const getList = () => {
    menuList(paginationData).then(res => {
        tableData.list = res.data.data.list;
        tableData.total = res.data.data.total;
        // tableData=res.data.data.list;
    })
}

const permissionData = ref([]);// 树形结构菜单权限数据

const formRef = ref();// 表单验证对象

const dialogTableVisible = ref(false);// 窗口状态

const handelClose = () => { // 关闭窗口时的回调
    dialogTableVisible.value = false;
}

const disable = ref([2, 4, 5]);// 默认选中

const expandeds = ref([2]); // 默认展开

const treeRef = ref(); // 树形结构对象

const rules = reactive({
    name: [{
        required: true,
        message: '请输入权限名称',
        trigger: 'blur'
    }]
});
</script>

<style scoped lang="less">
.btns {
    margin-top: 30px;
    background-color: white;
    padding: 10px;
}
</style>